<template>
	<div class="cluster-status">
		<div class="status">
			<el-card>
				<pie title="OSD健康状态" :data="state.osdData" />
			</el-card>
			<el-card>
				<pie title="MON健康状态" :data="state.monData" />
			</el-card>
			<el-card>
				<pie title="MGR健康状态" :data="state.mgrData" />
			</el-card>
			<el-card>
				<pie title="节点状态" :data="state.nodeData" />
			</el-card>
		</div>
		<div class="occupy">
			<el-card>
				<pie title="CPU占用" :data="state.cpuData" labelUnit="%" />
			</el-card>
			<el-card>
				<pie title="内存占用" :data="state.memoryData" labelUnit="%" />
			</el-card>
			<el-card>
				<pie title="集群容量" innerDiameter="0%" :data="state.clusterData" labelUnit="%" />
			</el-card>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
import { useMonitorApi } from '/@/api/monitor-center';

interface DataState{
	osdData:any[];
	monData:any[];
	mgrData:any[];
	nodeData:any[];
	cpuData:any[];
	memoryData:any[];
	clusterData:any[];
}

const pie = defineAsyncComponent(() => import('/@/components/echarts/pie.vue'));

const monitorApi = useMonitorApi();
const state = reactive<DataState>({
	osdData: [],
	monData: [],
	mgrData: [],
	nodeData: [],
	cpuData: [],
	memoryData: [],
	clusterData: [],
});
// Get chart data
const getMonitorList = () => {
	monitorApi.monitorList().then((res:any) => {
		const osd = res.data.osd;
		const mon = res.data.mon;
		const mgr = res.data.mgr;
		const node = res.data.node;
		const cpu = res.data.cpuUsage;
		const memory = res.data.memoryUsage;
		const cluster = res.data.capacityUsage;
		state.osdData = [
			{
				value: osd.osdNormalNum,
				name: '正常',
				itemStyle: {
					color: '#91CC75'
				}
			},
			{
				value: Number(osd.osdNum) - Number(osd.osdNormalNum),
				name: '异常',
				itemStyle: {
					color: '#EE6666'
				}
			},
		];
		state.monData = [
			{
				value: mon.quorum?.length || 0,
				name: '正常',
				itemStyle: {
					color: '#91CC75'
				}
			},
			{
				value: mon.down?.length || 0,
				name: '异常',
				itemStyle: {
					color: '#EE6666'
				},
				tooltipData: mon.down
			},
		];
		state.mgrData = [
			{
				value: mgr.mgrLeader ? 1 : 0,
				name: 'active',
				itemStyle: {
					color: '#91CC75'
				},
				tooltipData: mgr.mgrLeader ? [mgr.mgrLeader] : []
			},
			{
				value: mgr.standbyNum,
				name: 'standby',
				itemStyle: {
					color: '#FAC858'
				}
			},
		];
		state.nodeData = [
			{
				value: node.online?.length || 0,
				name: '在线',
				itemStyle: {
					color: '#91CC75'
				}
			},
			{
				value: node.offline?.length || 0,
				name: '离线',
				itemStyle: {
					color: '#EE6666'
				},
				tooltipData: node.offline
			},
		];
		state.cpuData = [
			{
				value: (100 - cpu).toFixed(2),
				name: '空闲',
				itemStyle: {
					color: '#73C0DE'
				}
			},
			{
				value: cpu,
				name: '占用',
				itemStyle: {
					color: '#5470C6'
				}
			},
		];
		state.memoryData = [
			{
				value: (100 - memory).toFixed(2),
				name: '空闲',
				itemStyle: {
					color: '#73C0DE'
				}
			},
			{
				value: memory,
				name: '占用',
				itemStyle: {
					color: '#5470C6'
				}
			},
		];
		state.clusterData = cluster !== null ? [
			{
				value: (100 - cluster).toFixed(2),
				name: '空闲',
				itemStyle: {
					color: '#73C0DE'
				}
			},
			{
				value: cluster,
				name: '占用',
				itemStyle: {
					color: '#5470C6'
				}
			},
		] : [null];
	}).catch(() => {
		state.osdData = [];
		state.monData = [];
		state.mgrData = [];
		state.nodeData = [];
		state.cpuData = [];
		state.memoryData = [];
		state.clusterData = [];
	});
};
const timer = ref();
onMounted(() => {
	getMonitorList();
	timer.value = setInterval(getMonitorList, 5000);
});
onUnmounted(() => {
	clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
.cluster-status{
    height: calc(100vh - 160px);
    padding: 5px;
    box-sizing: border-box;
    > div{
        height: calc((100% - 15px) / 2);
        display: flex;
        justify-content: space-between;
        :deep(.el-card){
            height: 100%;
            .el-card__body{
                height: 100%;
                padding: 10px;
            }
        }
    }
    .status{
        :deep(.el-card){
            width: calc((100% - 45px) / 4);
            height: 100%;
        }
    }
    .occupy{
        margin-top: 15px;
        :deep(.el-card){
            width: calc((100% - 30px) / 3);
            height: 100%;
        }
    }
}
</style>